<template>
  <el-form :model="nodeModalForm" ref="nodeModal"
           label-placement="left"
           label-width="120px"
           :rules="nodeModalRules"
           size="small">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="节点名称" prop="nodeName">
          <el-input v-model="nodeModalForm.nodeName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="新建列名称" prop="rowName">
          <el-input v-model="nodeModalForm.rowName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="选择要合并的列" prop="rows">
          <el-select v-model="nodeModalForm.rows" allow-create multiple
                     filterable default-first-option clearable>
            <el-option v-for="item in rowsList"
                       :key="item.COLUMN_NAME"
                       :label="item.COLUMN_NAME"
                       :value="item.COLUMN_NAME">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="删除原始列" prop="deleteRows">
          <el-checkbox v-model="nodeModalForm.deleteRows" label="删除原始列"></el-checkbox>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="分割符" prop="separator">
          <el-select v-model="nodeModalForm.separator">
            <el-option v-for="item in separatorList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="nodeModal-footer">
      <span class="dialog-footer">
        <el-button plain @click="handleConfigCancel">取消</el-button>
        <el-button type="primary" @click="handleConfigConfirm">更新</el-button>
      </span>
    </div>
  </el-form>
</template>

<script>
import { computed, defineComponent, inject, onMounted, ref } from "vue";
import { useStore } from "vuex";
import { separatorList } from "../../../../../../utils/dict";

export default defineComponent({
  name: "node-config-join",
  props: {
    node: Object,
  },
  components: {},
  setup(props, ctx) {
    const store = useStore();
    const rowsList = ref([]);
    const flowData = computed(() => store.state.flowEtl.flowData);
    const nodeList = computed(() => flowData.value.nodeList);
    const nodeConfigClose = inject("nodeConfigClose");
    const nodeModalForm = ref({
      nodeName: "",
      rows: [],
      rowName: "",
      deleteRows: [],
      separator: "",
    });
    const nodeModal = ref();
    const nodeModalRules = ref({
      nodeName: {
        required: true,
        message: "请输入数据源名称",
        trigger: "blur",
      },
      rowName: {
        required: true,
        message: "请输入列名称",
        trigger: "blur",
      },
      rows: {
        required: true,
        message: "请选择要合并的列",
        trigger: "change",
      }
    });
    const handleConfigCancel = () => {
      nodeConfigClose();
    };
    const nodeConfigUpdate = (node) => {
      let fields = rowsList.value.filter(field => {
        if (node.rows.includes(field.COLUMN_NAME)) {
          return field;
        }
      });
      let nodes = [...nodeList.value].map(item => {
        if (item.id === node.id) {
          item.status = true;
          item.nodeName = node.nodeName;
          item.config.rowName = node.rowName;
          item.config.deleteRows = node.deleteRows;
          item.config.separator = node.separator;
          item.config.rows = node.rows;
          item.config.fields = fields;
          item.originFields = rowsList;
        }
        return item;
      });
      store.commit("flowEtl/set_nodeList", nodes);
      nodeConfigClose();
    };
    const handleConfigConfirm = () => {
      nodeModal.value.validate((valid) => {
        if (valid) {
          nodeConfigUpdate(nodeModalForm.value);
        } else {
          return false;
        }
      });
    };
    const resetForm = () => {
      nodeModalForm.value = {
        id: null,
        nodeName: "",
        rows: [],
        rowName: "",
        deleteRows: false,
        separator: "",
      };
    };
    onMounted(() => {
      resetForm();
      nodeModalForm.value = {
        id: props.node.id,
        nodeName: props.node.nodeName,
        rowName: props.node.config.rowName,
        separator: props.node.config.separator,
        rows: props.node.config.rows,
      };
      rowsList.value = props.node.originFields;
    });
    return {
      separatorList: separatorList,
      rowsList,
      nodeList,
      nodeModalForm,
      nodeModalRules,
      nodeModal,
      resetForm,
      handleConfigCancel,
      handleConfigConfirm,
      nodeConfigUpdate,
      nodeConfigClose,
    };
  },
});
</script>

<style scoped>
.field-table {
  padding: 0 12px 24px;
}

.nodeModal-footer {
  padding: var(--el-dialog-padding-primary);
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
}
</style>